<ul class="page-list-wrapper my-js-hook2">
    <!-- List Loop -->
   {volist name='posts' id='vo' key='k'}
        <li class="columns small-12 medium-6 large-3 offer-false">
            <a href="{:url('Pages/detail', array('id' => $vo.id));}">
                <div class="image-wrapper backstretch-block-lazy toggled" style="position: relative; z-index: 0; background-image: none;">
                    <img alt="" src="{$vo.img ? $vo.img : "__HOME__/images/1.jpg"}">
                </div>
                <div class="content-wrapper">
                    <p class="tagline">{$vo.title}</p>
                    <h3>{$vo.desc} new</h3>
                    <span class="link">查看更多</span>
                </div>
            </a>
        </li>
   {/volist}
</ul>

<script>
    $(function() {
        var BL1                    = 270 / 180
        var BL2                    = 1500 / 1000
        var $1                     = $('.my-js-hook2').find('.image-wrapper').find('img')
        var $c                     = $('.my-js-hook2').find('.content-wrapper').eq(0)
        var $c2                    = $('.my-js-hook1')
        var $l                     = $c2.find('.image-wrapper')
        var $r                     = $c2.find('.content-wrap')
        $(window).on('resize', (function a() {
            var w1           = $c.outerWidth()
            var w2                  = $l.outerWidth()
            var h                   = Math.ceil(w2 / BL2)
            var $2                  = $l.find('img')
            $1.width(w1).height(Math.ceil(w1 / BL1))
            $2.width(w2).height(h)
            var css                 = {
                position            : 'absolute',
                top                 : -(h - $l.height()) / 2,
                left                : 0
            }
            $2.css(css)
            return a
        })())
    })
</script>